<template>
	<view class="container">
		<image class="top-img" src="https://mallfile.oss-cn-shanghai.aliyuncs.com/fault/kf/2021-04-09/mine_top.png">
		</image>
		<view class="top">
			<view v-if="loginFlag" class="mine_avatar">
				<image @click="getUserInfo"
					:src="userInfo.avatarUrl ||  'https://mallfile.oss-cn-shanghai.aliyuncs.com/fault/kf/2021-04-09/default_avatar.png'"
					class="mine_avatar_pic"></image>
			</view>
			<view v-if="loginFlag" class="mine_info">
				<view class="mine_info_nickName">
					{{userInfo.name || '姓名'}}
				</view>
				<view class="mine_info_tel">
					{{userInfo.mobile}}
				</view>
			</view>
			<view v-if="!loginFlag" class="mine_avatar">
				<image :src="'https://mallfile.oss-cn-shanghai.aliyuncs.com/fault/kf/2021-04-09/default_avatar.png'"
					class="mine_avatar_pic"></image>
			</view>
			<view v-if="!loginFlag" class="mine_info">
				<view class="mine_info_nickName">
					您还未登录，暂时无法查看
				</view>
			</view>
			<view class="toLoginTop" v-if="!loginFlag">
				<view class="toLogincontent" @click="goLogin">去登录 ></view>
			</view>
		</view>

		<view v-if="loginFlag">
			<view class="list_box">
				<uni-list>
					<uni-list-item title="添加门锁" thumb="/static/mine/addlock.png" thumb-size="medium"
						to="/pages/mine/addlock/addLockList"></uni-list-item>
				</uni-list>
			</view>
			<view class="list_box">
				<uni-list>
					<uni-list-item title="我的门锁" thumb="/static/mine/mylock.png" thumb-size="medium"
						to="/pages/mine/mylock/myLockList"></uni-list-item>
				</uni-list>
			</view>
			<view class="list_box">
				<uni-list>
					<uni-list-item title="门锁升级" thumb="/static/mine/mylock.png" thumb-size="medium"
						to="/pages/mine/upgrade/index"></uni-list-item>
				</uni-list>
			</view>
			<view class="list_box">
				<uni-list>
					<uni-list-item title="扫码远程开锁" thumb="/static/mine/mylock.png" thumb-size="medium" clickable
						@click="openWXscan"></uni-list-item>
				</uni-list>
			</view>
		</view>
		<view v-else>
			<view class="list_box">
				<uni-list>
					<uni-list-item title="添加门锁" thumb="/static/mine/addlock.png" thumb-size="medium"
						to="/pages/login/codelogin"></uni-list-item>
				</uni-list>
			</view>
			<view class="list_box">
				<uni-list>
					<uni-list-item title="我的门锁" thumb="/static/mine/mylock.png" thumb-size="medium"
						to="/pages/login/codelogin"></uni-list-item>
				</uni-list>
			</view>
		</view>


		<view class="mine_content foot" v-if="loginFlag" @click="logOut">
			<view class="panel-view logout-btn">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		openLockRemoteByScan
	} from '@/api/lock.js'

	import util from '@/utils/util.js';
	const regExp = /^[1-9]\d{18}/;
	export default {
		name: 'mine',
		data() {
			return {
				btnCanClick: true, // 登录按钮是否可以点击
				value: '0',
				userInfo: {
					mobile: '',
					avatarUrl: '',
					name: '',
				},
				cusPhone: '', // 客服电话
				getUserAuthInfo: null, // 用户授权信息
				loginFlag: false, // 用户是否登录了
				userDto: null,
			}
		},
		// 页面隐藏，销毁
		onHide() {

		},
		onShow: function() {
			let userInfo = this.$userInfo;
			if (this.$userInfo.userId == null || this.$userInfo.userId == "") {
				this.loginFlag = false;
			} else {
				this.loginFlag = true;
				this.userInfo.mobile = userInfo.mobile;
				this.userInfo.name = userInfo.name;
			}
		},
		methods: {
			close() {
				this.$refs.popup.close()
			},
			// 退出登录
			async logOut() {
				uni.clearStorage('openId');
				this.$userInfo.openId = ''
				this.$userInfo.mobile = ''
				this.$userInfo.userId = ''
				this.$userInfo.name = ''
				this.getUserAuthInfo = null
				this.userInfo = {
					mobile: '',
					avatarUrl: '',
					nickName: '',
				}
				uni.setStorageSync('signInState', 'logout');
				uni.redirectTo({
					url: '/pages/login/codelogin',
				})
			},

			goLogin() {
				console.log('按钮是否可点击：' + this.btnCanClick);
				if (this.btnCanClick) {
					this.btnCanClick = false;
					// 延时1秒
					let timeOut = setTimeout(() => {
						clearTimeout(timeOut);
						this.btnCanClick = true;
					}, 1000);
					uni.clearStorageSync();
					uni.navigateTo({
						url: '/pages/login/codelogin'
					})
				}
			},

			getUserInfo() {
				console.log('点击了头像', this.getUserAuthInfo)
				if (!this.loginFlag) {
					uni.navigateTo({
						url: '/pages/login/codelogin'
					})
					return;
				}
				if (this.getUserAuthInfo) {
					return;
				}
				uni.getUserProfile({
					desc: "用于获取用户头像、昵称", //必填，声明获取用户个人信息后的用途，不超过30个字符
					success: (res) => {
						console.log(res, '头像信息')
						uni.setStorageSync('getUserAuthInfo', res);
						this.getUserAuthInfo = res;
						this.userInfo.avatarUrl = res.userInfo.avatarUrl;
						this.userInfo.nickName = res.userInfo.nickName;
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			openWXscan() {
				var that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: res => {
						console.log('scan res->', res)
						const lockNo = res.result || '';
						console.log('lockNo->', lockNo);
						console.log('regExp test->', regExp.test(lockNo));
						if (!(regExp.test(lockNo))) {
							console.log('regExp test->', !regExp.test(lockNo));
							util.toast('该二维码有误');
							return;
						}
						uni.showModal({
							title: '是否确认开锁',
							confirmText: '确认',
							cancelText: '取消',
							success: async (res) => {
								if (!res.confirm) return;
								const data = {
									lockNo,
									mobile: this.userInfo.mobile
								}
								util.loading('指令正在下发...')
								const resp = await openLockRemoteByScan(data);
								if (resp && resp.statecode != '0') {
									util.hideLoading();
									util.toast(resp.statemsg);
								} else {
									setTimeout(() => {
										util.hideLoading();
									}, 4000)
								}
							}
						})

					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8FA;
	}

	.container {
		position: relative;
		height: 100%;
	}

	.top {
		width: 100%;
		height: 300rpx;
		z-index: 99;
		position: relative;

		.toLoginTop {
			.toLogincontent {
				color: #fff;
			}
		}


		.selectClass {
			display: inline-block;
			position: absolute;
			top: 72rpx;
			right: 0;

			::v-deep .section {
				.uni-stat__select {
					width: 160rpx;
				}

				.uni-stat__actived {
					width: 160rpx;

					.uni-select {
						width: 160rpx;
						height: 64rpx;
						border-radius: 40rpx;
						text-align: center;

						.uni-select__input-box {
							width: 160rpx;

							.uni-select__input-text {
								color: #fff;
							}

							uni-icons {
								position: relative;
								left: -30rpx;

								text {
									color: #fff !important;
								}
							}
						}
					}
				}
			}
		}
	}

	.top-img {
		width: 100%;
		height: 300rpx;
		position: absolute;
		top: 0;
	}

	.mine_avatar {
		width: 150rpx;
		height: 150rpx;
		margin: 50rpx;
		float: left;
	}

	.mine_avatar_pic {
		width: 140rpx;
		height: 140rpx;
		margin-right: 16px;
		overflow: hidden;
		display: block;
		margin: 20rpx;
		border-radius: 50%;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.mine_info {
		margin-top: 70rpx;

		.mine_info_nickName {
			color: #FFFFFF;
			margin-top: 47rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.mine_info_tel {
			color: #FFFFFF;
		}
	}

	.mine_content {
		width: 90%;
		background-color: #FFFFFF;
		margin: 36rpx 32rpx 0 32rpx;

		.logout-btn {
			color: #1D78F7;
			text-align: center;
			font-size: 28rpx;
		}
	}

	.list_box /deep/ {
		.uni-list-item__content-title {
			color: #1F2642 !important;
		}
	}

	.popup_phone /deep/ {
		.vue-ref {
			padding-bottom: 0 !important;
		}
	}

	.popup_box {
		padding: 20rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.popup_text {
			width: 80%;
			padding: 20rpx 20rpx 40rpx 20rpx;
			color: #1D78F7;
			border-bottom: 2rpx solid #E8E9EC;
			text-align: center;
		}

		.popup_btn {
			padding: 40rpx;
			color: #62677A;
			text-align: center;
		}
	}

	.foot {
		position: absolute;
		bottom: 200rpx;
		border-radius: 10rpx;
	}

	.panel-view {
		box-sizing: border-box;
		height: 96rpx;
		padding: 26rpx 20rpx 26rpx 32rpx;
		position: relative;
		font-family: PingFangSC-Regular, PingFang SC;
		font-size: 32rpx;
	}

	.popup-box {
		background: #fff;
		width: 40vh;
		border-radius: 20rpx;
		padding: 100rpx 50rpx 50rpx 50rpx;
		text-align: center;
		color: #1F2642;
		font-size: 32rpx;

		.btn-box {
			background: #4593FF;
			margin-top: 80rpx;
		}

	}
</style>